---
title: Watermark
sidebar_label: Watermark
description: Examples of how to add a watermark to your chart.
pagination_prev: null
pagination_next: null
keywords:
  - watermark
  - example
---

Lightweight Charts™ has a built-in feature for displaying simple text watermarks on your chart.
This example shows how to configure and add this simple text watermark to your chart.
If you are looking to add a more complex watermark then have a look at the [advanced watermark example](#advanced-watermark-example)
included below.

## Short answer

A simple text watermark can be configured and added by specifying the [`watermark`](/docs/api/interfaces/ChartOptionsBase#watermark) property within
the chart options as follows:

```js
chart.applyOptions({
    watermark: {
        visible: true,
        fontSize: 24,
        horzAlign: 'center',
        vertAlign: 'center',
        color: 'rgba(171, 71, 188, 0.5)',
        text: 'Watermark Example',
    },
});
```

The options available for the watermark are: [Watermark Options](/docs/api/interfaces/WatermarkOptions).

To have the watermark appear, you need to set `visible` to `true` and ensure that the `text` property isn't empty.

You can see full [working examples](#examples) below.

## Resources

- [Watermark Options](/docs/api/interfaces/WatermarkOptions)

## Examples

import UsageGuidePartial from "./_usage-guide-partial.mdx";

<UsageGuidePartial />

import CodeBlock from "@theme/CodeBlock";

### Simple Watermark Example

import codeSimple from "!!raw-loader!./watermark-simple.js";

<CodeBlock replaceThemeConstants chart className="language-js" hideableCode>
	{codeSimple}
</CodeBlock>

### Advanced Watermark Example

If a simple text watermark doesn't meet your requirements then you can use the following tips
to rather create your own custom watermark using `html` and `css`.

We will first set the `background` color of the chart to `transparent` so that we can
place our custom watermark underneath the chart and still see it.

```js
chart.applyOptions({
    layout: {
        // set chart background color to transparent so we can see the elements below
        // highlight-next-line
        background: { type: 'solid', color: 'transparent' },
    },
});
```

Next we will create a `div` element, and attach it as a child of the `container` element which is holding the chart.

By setting the `zIndex` value for this div to be negative it will appear beneath the chart.

We will position the div using `display: absolute` and by setting `inset: 0px` the div will fill the container.

You can then style the div to meet your specific needs.

```js
const container = document.getElementById('container');
const background = document.createElement('div');
// place below the chart
background.style.zIndex = -1;
background.style.position = 'absolute';
// set size and position to match container
background.style.inset = '0px';
background.style.backgroundImage = `url("")`;
background.style.backgroundRepeat = 'no-repeat';
background.style.backgroundPosition = 'center';
background.style.opacity = '0.5';
container.appendChild(background);
```

import codeAdvanced from "!!raw-loader!./watermark-advanced.js";

<CodeBlock replaceThemeConstants chart className="language-js" hideableCode>
	{codeAdvanced}
</CodeBlock>
